<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>table模块快速使用</title>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/static/viewer/viewer.css}"/>

    <script th:src="@{/static/js/jquery.min.js}"></script>
    <script th:src="@{/static/layui/layui.js}"></script>
    <script th:src="@{/static/layui/wk.js}"></script>
    <script th:src="@{/static/viewer/viewer.js}"></script>

</head>

<body>

<div>
    <div class="layui-form layui-form-pane" style="margin: 5px">

        <button class="layui-btn" th:id="add" lay-even="add">添加</button>

        <!--<div class="layui-inline" style="float: right">-->
            <!--<div class="layui-input-inline">-->
                <!--<div class="layui-input-block">-->
                    <!--<input type="text" th:name="groupName" th:id="groupName"  lay-verify="required" placeholder="请输入角色名称" autocomplete="off" class="layui-input"/>-->
                <!--</div>-->
            <!--</div>-->
            <!--<button class="layui-btn" data-type="reload">搜索</button>-->
        <!--</div>-->
    </div>

    <div class="layui-form layui-form-pane" style="margin: 5px">
        <table id="demo" lay-filter="test"></table>
    </div>
</div>

<!--序号-->
<script type="text/html" id="increase">
    {{d.LAY_TABLE_INDEX+1}}
</script>

<script type="text/html" id="createTime">
    {{# return layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss') }}
</script>


<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="setAcl">分配权限</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>


<script th:inline="none">
    layui.use(['util', 'laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'form'], function () {
        var table = layui.table,
            form = layui.form,
            $ = layui.jquery,//加载jquery对象
            layer = layui.layer;

        //让层自适应iframe
        $('#add').on('click', function () {
            var index = layer.open({
                type: 2,
                content: '/bg/dicRole/toAdd',
                area: ['800px', '450px'],
                maxmin: true,
                end: function () {
                    location.reload();
                }
            });
            parent.layer.iframeAuto(index);
        });


        //第一个实例
        table.render({
            elem: '#demo'
            , url: '/bg/dicRole/findDicRoleList' //数据接口
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                ,groups: 1 //只显示 1 个连续页码
                ,first: false //不显示首页
                ,last: false //不显示尾页
                }
            , limit: 10 //初始页条数
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'roleId', title: 'ID', width: 80, templet: '#increase'}
                , {field: 'roleName', title: '角色名称'}
                , {field: 'createTime', title: '创建时间', templet: '#createTime'}
                , {fixed: 'right', title: '操作栏', align: 'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
            ]]
            ,done : function () {
                $(".showImg").viewer();
            }
            , id: 'testReload' //重载标识
        });

        var active = {
            // 方法级渲染的重载 不需要 #
            reload: function () {
                //获取条件
                var groupName = $('#groupName').val();

                //执行重载 testReload 对应第一个实例中 id
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        groupName: groupName
                    }
                });
            }
            // 获取checkStatus行数据
            , dels: function () { //获取选中数据 demo 为table的id
                var checkStatus = table.checkStatus('testReload')
                    , data = checkStatus.data;
                var userIds = [];
                data.forEach(function (item, index) {
                    userIds.push(item.userId);
                });
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        url: '/bg/dicRole/dels',
                        type: 'post',
                        dataType: 'json',
                        data: {userIds: userIds.join(",")},//join 将数组组装成 1,2,3 的形式
                        success: function (data) {
                            if (data.code == 200) {
                                layer.msg(data.msg, {icon: 1, time: 500}, function () {
                                    $(".layui-laypage-btn").click();
                                });
                            } else {
                                layer.msg(data.msg, {icon: 1, time: 1000});
                            }
                        }
                    })
                });
            }
            , update: function () { //获取选中数据 demo 为table的id   data
                var checkStatus = table.checkStatus('testReload')
                    , data = checkStatus.data;
                if (data.length != 1) {
                    layer.msg("请选择一个操作");
                    return false;
                }
                //data 获取的是数组,所以当修改的时候就要获取第一个数据
                var userId = data[0].userId;
                var index = layer.open({
                    type: 2,
                    content: '/manage/user/goEdit?roleId=' + roleId,
                    area: ['800px', '450px'],
                    maxmin: true,
                    end: function () {
                        location.reload();
                    }
                });
                parent.layer.iframeAuto(index);
            }
        };

        $('.layui-form .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听工具条
        table.on('tool(test)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象



            if (layEvent === 'look') { //查看
                //do somehing
                layer.msg('的确很重要', {icon: 1, time: 500});
            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        url: '/bg/dicRole/del',
                        type: 'post',
                        dataType: 'json',
                        data: {roleId: data.roleId},
                        success: function (data) {
                            if (data.code == "200") {
                                layer.msg(data.msg, {icon: 1, time: 500}, function () {
                                    window.location.reload();
                                });
                            } else {
                                layer.msg(data.msg, {icon: 2, time: 1000});
                            }
                        },
                        complete : function(xhr, status) {
                            //拦截器拦截没有权限跳转
                            // 通过xhr取得响应头
                            var REDIRECT = xhr.getResponseHeader("REDIRECT");
                            //如果响应头中包含 REDIRECT 则说明是拦截器返回的
                            if (REDIRECT == "REDIRECT")
                            {
                                document.location.href = xhr.getResponseHeader("CONTEXTPATH");
                            }
                        }

                    })
                });
            } else if (layEvent === 'edit') { //编辑
                var index = layer.open({
                    type: 2,
                    content: '/bg/dicRole/toEdit?roleId=' + data.roleId,
                    area: ['800px', '450px'],
                    maxmin: true,
                    end: function () {
                        //刷新当前页
                        $(".layui-laypage-btn").click();
                    }
                });
                parent.layer.iframeAuto(index);
            } else if (layEvent === 'setAcl') { //监听单元格
                 var roleId =  data.roleId;
                    //页面层-展示图片
                    layer.open({
                        type: 2,
                        title: '权限分配',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['380px', '90%'],
                        content: '/bg/dicRoleAcl/toSetAcl?roleId='+roleId //iframe的url
                });
            }
        });
        //
        // var getIds = function () {
        //     var ids = [];
        //     var checkStatus = table.checkStatus('testReload')
        //         , data = checkStatus.data;
        //     $.each(data, function (index, item) {
        //         ids.push(item['userId'])
        //     });
        //     return ids;
        // }

    });
</script>
</body>
</html>
